const Charts = require("../../lib/wxcharts-min");
// page/chart-demo/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 　pie（饼图）
    new Charts({
      canvasId: "pie", // required                    微信小程序canvas-id
      type: "pie", // required 图表类型，可选值为pie, line, column, area，radar，ring
      series: [ // required        数据列表
        { name: "一班", data: 50 },
        { name: "二班", data: 30 },
        { name: "三班", data: 20 },
        { name: "四班", data: 18 },
        { name: "五班", data: 8 },
      ],
      width: 320, // required                canvas宽度，单位为px
      height: 230, // required                canvas高度，单位为px
      dataLabel: true, // default true     是否在图表中显示数据内容值
    });

    // 线图（circle）
    new Charts({
      canvasId: "canvas2",
      dataPointShape: "circle", // default true   是否在图表中显示数据点图形标识
      type: "line",
      extra: {
        lineStyle: "curve", //线条的形状（弧形）
      },
      categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
      series: [
        {
          name: "成交量1",
          data: [0.15, null, 0.45, 0.37, 0.4, 0.8], //设置某一个值为null会出现断层
          format: function (val) {
            return val.toFixed(2) + "万";
          },
        },
        {
          name: "成交量2",
          data: [0.3, 0.37, 0.65, 0.78, 0.69, 0.94],
          format: function (val) {
            return val.toFixed(2) + "万";
          },
        },
      ],
      yAxis: {
        title: "成交金额 (万元)",
        format: function (val) {
          return val.toFixed(2);
        },
        fontColor: "red",
        titleFontColor: "red",
        min: 0,
        gridColor: "red",
      },
      width: 320,
      height: 230,
      dataLabel: true,
    });

    // 柱状图（column）
    new Charts({
      canvasId: "canvas3",
      dataPointShape: false,
      type: "column",
      categories: [
        "2016-08",
        "2016-09",
        "2016-10",
        "2016-11",
        "2016-12",
        "2017",
      ],
      series: [
        {
          name: "成交量1",
          data: [15, 20, 45, 37, 4, 80],
          color: "rgba(0,0,0,0.3)", //支持rgba，但不支持渐变色
        },
        {
          name: "成交量2",
          data: [70, 40, 65, 100, 34, 18],
        },
        {
          name: "成交量3",
          data: [100, 50, 75, 200, 15, 13],
        },
      ],
      yAxis: {
        format: function (val) {
          return val + "万";
        },
      },
      xAxis: {
        disableGrid: true,
      },
      width: 320,
      height: 230,
      dataLabel: true,
      extra: {
        column: {
          width: 40, //柱的宽度
        },
      },
    });

    // 区域图（area）
    new Charts({
      canvasId: "canvas4",
      type: "area",
      categories: [
        "2016-08",
        "2016-09",
        "2016-10",
        "2016-11",
        "2016-12",
        "2017",
      ],
      series: [
        {
          name: "成交量1",
          data: [70, 40, 65, 100, 34, 18],
          format: function (val) {
            return val.toFixed(2) + "万";
          },
        },
        {
          name: "成交量2",
          data: [15, 20, 45, 37, 4, 80],
          format: function (val) {
            return val.toFixed(2) + "万";
          },
        },
      ],
      yAxis: {
        format: function (val) {
          return val + "万";
        },
      },
      width: 320,
      height: 230,
    });

    // 环形图（ring）
    new Charts({
      animation: true,
      canvasId: "canvas5",
      type: "ring",
      extra: {
        ringWidth: 10, //圆环的宽度
        pie: {
          offsetAngle: -45, //圆环的角度
        },
      },
      title: {
        name: "70%",
        color: "#7cb5ec",
        fontSize: 25,
      },
      subtitle: {
        name: "收益率",
        color: "#666666",
        fontSize: 15,
      },
      series: [
        {
          name: "成交量1",
          data: 15,
          stroke: false,
        },
        {
          name: "成交量2",
          data: 35,
          stroke: false,
        },
        {
          name: "成交量3",
          data: 78,
          stroke: false,
        },
        {
          name: "成交量4",
          data: 63,
          stroke: false,
        },
      ],
      disablePieStroke: true,
      width: 320,
      height: 230,
      dataLabel: true,
      legend: false,
      padding: 0,
    });

    // 雷达图（radar）
    new Charts({
      animation: true,
      canvasId: "canvas6",
      type: "radar",
      categories: ["1", "2", "3", "4", "5", "6"],
      series: [
        {
          name: "成交量1",
          data: [90, 110, 125, 95, 87, 122],
        },
        {
          name: "成交量2",
          data: [190, 210, 105, 35, 27, 102],
        },
      ],
      width: 320,
      height: 230,
      extra: {
        radar: {
          max: 200, //雷达数值的最大值
        },
      },
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});
